<template>
    <div class="order-detail">
      <h2>订单详情</h2>
      
      <!-- 订单基本信息 -->
      <div class="order-info">
        <div class="info-item">
          <label>订单编号：</label>
          <span>{{ order.id }}</span>
        </div>
        <div class="info-item">
          <label>下单时间：</label>
          <span>{{ order.createdAt }}</span>
        </div>
        <div class="info-item">
          <label>订单金额：</label>
          <span>{{ order.amount }} 元</span>
        </div>
        <div class="info-item">
          <label>订单状态：</label>
          <span :class="`status-${order.status}`">{{ order.status }}</span>
        </div>
      </div>
  
      <!-- 订单详情表格 -->
      <div class="order-table">
        <table>
          <thead>
            <tr>
              <th>商品名称</th>
              <th>价格</th>
              <th>数量</th>
              <th>小计</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in order.items" :key="item.id">
              <td>{{ item.name }}</td>
              <td>{{ item.price }} 元</td>
              <td>{{ item.quantity }}</td>
              <td>{{ item.price * item.quantity }} 元</td>
            </tr>
          </tbody>
        </table>
      </div>
  
      <!-- 订单操作 -->
      <div class="order-actions">
        <button @click="cancelOrder">取消订单</button>
        <button v-if="order.status === '待支付'" @click="payOrder">去支付</button>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref, onMounted } from 'vue';
  
  export default defineComponent({
    name: 'OrderDetail',
    setup() {
      // 定义订单的类型
      interface OrderItem {
        id: number;
        name: string;
        price: number;
        quantity: number;
      }
  
      interface Order {
        id: string;
        createdAt: string;
        amount: number;
        status: string;
        items: OrderItem[];
      }
  
      // 定义订单数据
      const order = ref<Order>({
        id: '123456789',
        createdAt: '2024-10-10 10:10:10',
        amount: 0,
        status: '待支付',
        items: [
          {
            id: 1,
            name: '商品A',
            price: 100,
            quantity: 2,
          },
          {
            id: 2,
            name: '商品B',
            price: 200,
            quantity: 1,
          },
        ],
      });
  
      // 计算订单总金额
      onMounted(() => {
        order.value.amount = order.value.items.reduce((sum, item) => sum + item.price * item.quantity, 0);
      });
  
      // 取消订单
      const cancelOrder = () => {
        if (confirm('确定要取消订单吗？')) {
          order.value.status = '已取消';
        }
      };
  
      // 去支付
      const payOrder = () => {
        alert('跳转到支付页面');
      };
  
      return {
        order,
        cancelOrder,
        payOrder,
      };
    },
  });
  </script>
  
  <style scoped>
  .order-detail {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
  }
  
  .order-info {
    margin-bottom: 20px;
  }
  
  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .info-item label {
    width: 80px;
    font-weight: bold;
  }
  
  .info-item span {
    flex: 1;
  }
  
  .order-table table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .order-table table th,
  .order-table table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  
  .order-table table th {
    background-color: #f2f2f2;
  }
  
  .order-table table tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  
  .order-actions button {
    padding: 5px 10px;
    margin-right: 10px;
    background-color: #ff4444;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
  
  .order-actions button:hover {
    background-color: #cc0000;
  }
  
  .order-actions button:first-child {
    background-color: #4CAF50;
  }
  
  .order-actions button:first-child:hover {
    background-color: #45a049;
  }
  
  .status-待支付 {
    color: #FF9800;
  }
  
  .status-已支付 {
    color: #4CAF50;
  }
  
  .status-已取消 {
    color: #FF5252;
  }
  </style>